<template>
	<view class="nav-bar">
		<!--  :class="isNav ? 'acnav' : 'nav' "  -->
		<!-- <view :style="{ height: statusBarHeight + 'px'}"></view> -->
		<!-- <view class="left" @click="onClickBack">
	        <text class="icon-icon-chevron-left" style="font-size: 50rpx;"></text>
	    </view>  :style="{ marginTop: statusBarHeight + 'px', height: navBarHeight + 'rpx'  }"-->
		<!-- <view class="title" :style="{ height: titleBarHeight + 'px'}"> -->
		<view class="title" :style="{ height: '40px'}">
			<!-- <text class="title-text" @click="onClickBack">返回</text> -->
			<uni-icons type="left" size="23" color="#000000" class="title-text" @click="onClickBack"></uni-icons>
			<view class="title-renwu">{{ title }}</view>
			<uni-icons type="list" size="23" color="#000000" class="screen" @click="openFilterPopup('bottom')"></uni-icons>
		</view>
		<!-- <button class="button button-text" type="primary" @click="openFilterPopup('bottom')"><text>底部</text></button> -->
		<!-- 普通弹窗 -->
		<uni-popup 
			ref="popup" 
			border-radius="20px 20px 0px 0px"
			background-color="#fff"
			type="bottom"
			class="filter-popup"
			:height="height"
			@close="close"
		>
			
			<view class="top-title flex-row-sb" v-if="showTop">
			    <view class="popup-title">{{ filtertitle }}</view>
				<uni-icons type="closeempty" size="20" class="saasIcon" @click="close"></uni-icons>
			</view>
			<scroll-view class="select-scroll" scroll-y :style="{ height: `calc( ${height} - 120rpx - 152rpx  )` }">
				<view class="input-main">
					<view class="input-item" v-for="(item, index) in inputForm" :key="index">
						<label class="input-label">{{ item.title }}<text v-if="item.required" style="color: #FF0000;">*</text></label>
						<input :placeholder="item.placeholder" v-model="item.inpValue" class="input-field" />
					</view>	
				</view>
				<view class="select-main">
					<view class="select-item" v-for="(item, index) in data" :key="index">
						<view class="title"> {{ item.title }} </view>
						<view class="tag-list" v-if="!item.children">
							<view class="tag-item"
								:class="[acceptForm[item.key].includes(item2.value) ? 'select-on' : '']"
								v-for="(item2, index2) in item.data" :key="index2"
								@click="selectTagBuyValueOrId(item2, item.key, item.keyValue, item.isRadio)">
								{{ item2.title }}
							</view>
						</view>
						<!-- 有childer -->
						<view class="select-childer" v-else v-for="item2 in item.data" :key="item2.id">
							<view class="childer-title flex-row--c">{{ item2.title }}</view>
							<view class="tag-list">
								<template v-for="item3 in item2.children">
									<view class="tag-item"
									    :key="item3.id"
										:class="[acceptForm[item.key].includes(item3.id) ? 'select-on' : '']"
										@click="selectTagBuyValueOrId(item3, item.key, item.keyValue, item.isRadio)">
										{{ item3.title }}
									</view>
								</template>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<view style="height: 160rpx;"></view>
			<view class="filter-button flex-row-c">
				<view class="btn flex-row">
					<view class="btn-1 flex-row-c-c" @click="reset">重置</view>
					<view class="btn-2 flex-row-c-c" @click="finsh">完成</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	// 获取屏幕边界到安全区域距离
	// const {
	// 	safeAreaInsets
	// } = uni.getSystemInfoSync()
	// 引入胶囊
	// import {
	// 	getNavBarHeight,
	// 	getStatusBarHeight,
	// 	getTitleBarHeight
	// } from "../utils/system";
	export default {
		props: {
			//选中的表单
			form: {
				type: Object,
				default: () => {},
			},
			title: {
				type: String,
				required: true, // 你可以根据需要设置是否为必传
			},
			//标题
			filtertitle: {
			    type: String,
			    default: "全部筛选",
			},
			value: {
			    type: Boolean,
			    default: false,
			},
			//渲染数据
			data: {
			    type: Array,
			    default: () => [],
			},
			inpdata: {
			    type: Array,
			    default: () => [],
			},
			height: {
			    type: String,
			    default: "1000rpx",
			},
			//是否显示退出按钮
			showTop: {
			    type: Boolean,
			    default: true,
			},
		},
		computed: {
		    // 接收表单
		    acceptForm: {
		        get() {
					if(this.form != null){
						if (Object.keys(this.form).length ) {
						    return this.form;
						} else {
						    let obj = {};
						    this.data.forEach((item) => {
						        obj[item.key] = [];
						    });
						    return obj;
						}
					}
		        },
		        set(nval) {
		            this.$emit("update:form", nval);
					// this.filterForm = nval;
		        },
		    },
			// 接收表单
			inputForm: {
			    get() {
			        return this.localInpData;
			    },
			    set(nval) {
					// this.$set(this, 'inpdata', nval); // 如果 inpdata 是一个对象或数组，使用 $set 以确保响应式
			        // this.$emit("update:inpdata", nval);
					this.localInpData = nval;
			    },
			}
		},
		data() {
			return {
				// titleBarHeight: getTitleBarHeight(),
				// statusBarHeight: getStatusBarHeight(),
				// 创建一个本地副本
				localInpData: [...this.inpdata],
			}
		},
		methods: {
			// 返回上一页
			onClickBack() {
				uni.navigateBack();
			},
			openFilterPopup(type) {
				this.$refs.popup.open(type)
			},
			//选择存value 还是id
			selectTagBuyValueOrId(item, key, keyValue, isRadio) {
			    //如果是单选
			    if (isRadio) {
			        if (keyValue == "value") {
			            if (this.acceptForm[key].some((value) => value == item.value)) {
			                this.acceptForm[key] = this.acceptForm[key].filter((value) => value !== item.value);
			                return;
			            }
			            this.acceptForm[key] = [];
			            this.acceptForm[key].push(item.value);
			        } else {
			            if (this.acceptForm[key].some((id) => id == item.id)) {
			                this.acceptForm[key] = this.acceptForm[key].filter((id) => id !== item.id);
			                return;
			            }
			            this.acceptForm[key] = [];
			            this.acceptForm[key].push(item.id);
			        }
			    } else {
			        if (keyValue == "value") {
			            this.acceptForm[key].some((value) => value == item.value)
			                ? (this.acceptForm[key] = this.acceptForm[key].filter((value) => value !== item.value))
			                : this.acceptForm[key].push(item.value);
			        } else {
			            this.acceptForm[key].some((id) => id == item.id)
			                ? (this.acceptForm[key] = this.acceptForm[key].filter((id) => id !== item.id))
			                : this.acceptForm[key].push(item.id);
			        }
			    }
				
				// 确保 acceptForm[item.key] 是响应式的
				// this.$set(this.acceptForm, item.key, this.acceptForm); // 如果你是动态更新数组，使用 $set 来保证响应式更新
			
			    this.acceptForm = this.acceptForm;
			},
			//  点击完成
			finsh() {
				// for (let field of this.localInpData) {
				//   if (field.required && field.inpValue === "") {
				//     uni.showToast({
				//       title: `${field.title}不可为空`,
				//       icon: 'none'
				//     });
				//     return; // 直接返回，跳过后续代码
				//   }
				// }
				let resultObj = this.localInpData.reduce((acc, item) => {
				  // 使用 item.key 和 item.inpValue 更新 resultObj，并将 undefined 转为 ""
				  acc[item.key] = item.inpValue !== undefined ? item.inpValue : "";
				  return acc;
				}, {});
				
				if(this.acceptForm != null){
					resultObj = Object.keys(this.acceptForm).reduce((acc, key) => {
					  // 处理 acceptForm 中的 undefined 值
					  acc[key] = this.acceptForm[key][0] !== undefined ? this.acceptForm[key][0] : "";
					  return acc;
					}, resultObj);  // 继续使用已有的 resultObj
				}
				
				this.$emit("finsh", resultObj);
				this.$refs.popup.close();
			},
			close() {
			    // this.$emit("close");
				this.$refs.popup.close();
			},
			//重置
			reset() {
			    this.acceptForm = {};
				this.localInpData = this.localInpData.filter(item => {
				  // 这里我们只是返回一个新对象，age 设为 null，而不是进行元素的过滤
				  return true; // 保留所有元素
				}).map(item => {
				  return { ...item, inpValue: '' };  // 使用 map 来修改 age 字段
				});
			},
		}
	}
</script>

<style lang="scss">
	// .active{
	// 	opacity: 1;
	// }
	/* 导航栏样式 */
	.nav-bar {
		// .nav{
		// 	opacity: 0;
		// 	transition: all 0.3s;
		// }
		// display: flex;
		// justify-content: space-between;
		// align-items: center;
		// position: fixed;
		// top: 3%;
		// left: 0;
		width: 100%;
		// height: 155rpx;
		// padding: 0 10px;
		box-sizing: border-box;
		position: -webkit-sticky;
		/* Safari */
		position: sticky;
		top: 0;
		/* 吸顶位置 */
		z-index: 99;
		background-color: #FFFFFF;
		// margin-top: 55rpx;
	}

	/* 左侧按钮样式 */
	// .left {
	//  display: flex;
	//  justify-content: center;
	//  align-items: center;
	//  color: #000;
	//  background: #fff;
	//  border-radius: 60rpx;
	// }

	/* 标题样式 */
	.title {
		// flex: 1;
		display: flex;
		align-items: center;
		// margin-left: 26rpx;
		position: relative;
		line-height: 1;
	}

	/* 标题文字样式 */
	.title-text {
		// max-width: 200px;
		margin-left: 10rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		// font-size: 36rpx;
	}
	
	/* 筛选样式 */
	.screen {
		// max-width: 200px;
		margin-left: auto;
		padding-right: 15rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		// white-space: nowrap;
		// font-size: 36rpx;
	}

	.title-renwu {
		// color: #fff;
		/* text-align: center; */
		display: block;
		/* margin: 0 auto; */
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		// max-width: 340rpx;
		// overflow: hidden;
		// text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	// @font-face {
	//   font-family: 'iconfont';  /* Project id 2729410 */
	//   src: url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.woff2?t=1628330097695') format('woff2'),
	//        url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.woff?t=1628330097695') format('woff'),
	//        url('https://at.alicdn.com/t/font_2729410_3nhq3ibbcqg.ttf?t=1628330097695') format('truetype');
	// }
	// .saasIcon {
	//     font-family: "iconfont" !important;
	//     font-style: normal;
	//     -webkit-font-smoothing: antialiased;
	//     -webkit-text-stroke-width: 0.2px;
	//     -moz-osx-font-smoothing: grayscale;
	// }
	.filter-popup {
	    color: #000000;
	    .top-title {
	        font-weight: bold;
	        height: 90rpx;
	        // margin-left: 70rpx;
	        font-size: 34rpx;
	        margin-top: 20rpx;
	        .popup-title {
	            // height: 100%;
				position: absolute;
				left: 50%;
				-webkit-transform: translateX(-50%);
				transform: translateX(-50%);
				white-space: nowrap;
	        }
	        .saasIcon {
	            // width: 150rpx;
	            // height: 100%;
	            padding-right: 70rpx;
				font-size: 30rpx;
				margin-left: auto;
	        }
	    }
	    .select-scroll {
	    }
	    .select-main, .input-main {
	        padding: 0 32rpx;
			.input-item{
				display: flex;
				padding: 5rpx 0;
				// margin-top: 20rpx;
				border-bottom: 1px solid #f5f5f5;
				align-items: center;
				font-size: 30rpx;
				.input-label{
					color: #000000;
				}
				.input-field{
					flex: 1;
					padding-left: 15rpx;
					height: 70rpx;
					font-size: 30rpx;
				}
			}
	        .select-item {
	            .title {
	                font-weight: bold;
	                font-size: 30rpx;
	                color: #000000;
	                padding-top: 30rpx;
	            }
	            .tag-list {
	                display: flex;
	                flex-wrap: wrap;
	                margin-left: -12rpx;
					font-size: 25rpx;
	                .tag-item {
	                    margin-top: 20rpx;
	                    padding: 22rpx 54rpx;
	                    background: #f5f5f5;
	                    color: #484848;
	                    border-radius: 36rpx;
	                    margin-left: 12rpx;
	                    &.select-on {
	                        background: #0066ff;
	                        color: #fff;
	                    }
	                }
	            }
	        }
	        .select-childer {
	            .childer-title {
	                color: #484848;
	                font-size: 28rpx;
	                border-bottom: 1px solid #f5f5f5;
	                height: 80rpx;
	            }
	        }
	    }
	    .filter-button {
	        width: 100%;
	        height: 152rpx;
	        background: #ffffff;
	        box-shadow: 0px -3px 12px rgba(0, 0, 0, 0.06);
	        position: fixed;
	        bottom: 0;
	        .btn {
	            border-radius: 100rpx;
	            margin-top: 26rpx;
	            width: 680rpx;
	            height: 80rpx;
	            color: #ffffff;
	            font-size: 28rpx;
	            overflow: hidden;
	            .btn-1 {
	                flex: 1;
	                background: linear-gradient(271deg, #2698fb 0%, #84c6ff 100%);
	            }
	            .btn-2 {
	                flex: 1;
	                background: linear-gradient(90deg, #0066ff 0%, #1371ff 100%);
	            }
	        }
	    }
	
	    // 自定义css
	    .flex-row {
	        display: flex;
	    }
	
	    .flex-row-c {
	        display: flex;
	        justify-content: center;
	    }
	
	    .flex-row--c {
	        display: flex;
	        align-items: center;
	    }
	
	    .flex-row-c-c {
	        display: flex;
	        justify-content: center;
	        align-items: center;
	    }
	
	    // .flex-row-sb-c {
	    //     display: flex;
	    //     justify-content: space-between;
	    //     align-items: center;
	    // }
	
	    // .flex-row-sb-t {
	    //     display: flex;
	    //     justify-content: space-between;
	    //     align-items: flex-start;
	    // }
	
	    // .flex-row-sb-b {
	    //     display: flex;
	    //     justify-content: space-between;
	    //     align-items: flex-end;
	    // }
	
	    // .flex-row-c-sb {
	    //     display: flex;
	    //     justify-content: center;
	    //     align-items: space-between;
	    // }
	
	    .flex-row-sb {
	        display: flex;
	        // justify-content: space-between;
			justify-content: center;
			align-items: center;
			position: relative;
	    }
	
	//     .flex-row-l {
	//         display: flex;
	//         justify-content: flex-start;
	//     }
	
	//     .flex-row-l-c {
	//         display: flex;
	//         justify-content: flex-start;
	//         align-items: center;
	//     }
	
	    // .flex-row-c-t {
	    //     display: flex;
	    //     justify-content: center;
	    //     align-items: flex-start;
	    // }
	
	    // .flex-row-r-c {
	    //     display: flex;
	    //     justify-content: flex-end;
	    //     align-items: center;
	    // }
	
	    // .flex-row-r {
	    //     display: flex;
	    //     justify-content: flex-end;
	    // }
	
	    // .flex-row--b {
	    //     display: flex;
	    //     align-items: flex-end;
	    // }
	
	    // .flex-col {
	    //     display: flex;
	    //     flex-direction: column;
	    // }
	
	    // .flex-col-c {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: center;
	    // }
	
	//     .flex-col--c {
	//         display: flex;
	//         flex-direction: column;
	//         align-items: center;
	//     }
	
	    // .flex-col-c-c {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: center;
	    //     align-items: center;
	    // }
	
	    // .flex-col-sb-c {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: space-between;
	    //     align-items: center;
	    // }
	
	    // .flex-col-c-sb {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: center;
	    //     align-items: space-between;
	    // }
	
	    // .flex-col-sb {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: space-between;
	    // }
	
	    // .flex-col-t-c {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: flex-start;
	    //     align-items: center;
	    // }
	
	    // .flex-col-c-l {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: center;
	    //     align-items: flex-start;
	    // }
	
	    // .flex-col-t {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: flex-start;
	    // }
	
	    // .flex-col-b {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: flex-end;
	    // }
	
	    // .flex-col-b-c {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: flex-end;
	    //     align-items: center;
	    // }
	
	    // .flex-col-c-l {
	    //     display: flex;
	    //     flex-direction: column;
	    //     justify-content: center;
	    //     align-items: flex-end;
	    // }
	
	    // .flex-col--l {
	    //     display: flex;
	    //     flex-direction: column;
	    //     align-items: flex-start;
	    // }
	
	    // .flex-col--r {
	    //     display: flex;
	    //     flex-direction: column;
	    //     align-items: flex-end;
	    // }
	}
	
</style>